<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid  #40acc8;
            margin-bottom: 30px;
        }
        .box div{
            line-height: 40px;
        }
        button{
            line-height: 30px;
            background: #40acc8;
            border: none;
            color: #fff;
            border-radius: 5px;
            padding: 0 10px;
        }
        tr:nth-of-type(odd){
            background-color: gainsboro;
        }
        #app .head{
            background-color: #40acc8;
            border: none;
        }
        .head td{
            color: #fff;
        }
        td{
            line-height: 30px;
            padding: 5px 30px;
            text-align: center;
        }
        
        table{
            border: 2px solid #40acc8;
            border-collapse: collapse;
        }
        div span{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <fieldset class="box">
            <legend>学生信息录入系统</legend>
            <div>
                姓名: <input type="text" v-model="name" @input="reg('name')">
                    <span v-show="!regobj.regname">2到16位(字母,数字,下划线)</span>
            </div>
            <div>
                年龄: <input type="text" v-model="age" @input="reg('age')">
                    <span v-show="!regobj.regage">请输入0到120岁</span>
            </div>
            <div>
                性别: <select name="" id="" v-model="sex">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
            </div>
            <div>
                手机: <input type="text" @input="reg('phone')" v-model="phone">
                <span v-show="!regobj.regphone">请输入11位手机号码</span>
            </div>
            <button @click="add">创建新用户</button>
        </fieldset>
        <div id="box">
            <table>
                <tr class="head">
                    <td>姓名</td><td>性别</td><td>年龄</td><td>手机</td><td>删除</td>
                </tr>
                <tr v-for="(item,index) in arr">
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.phone}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </table>
        </div>
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            arr:[
                {name:"方君昊",sex:"男",age:20,phone:15473124380},
                {name:"乔向雁",sex:"女",age:22,phone:15373124380},
                {name:"鲁傲柔",sex:"男",age:23,phone:15273124380},
                {name:"寸琴韵",sex:"女",age:21,phone:15173124380},
            ],
            name:'',
            sex:'男',
            age:'',
            phone:'',
            regobj:{regname:false,regage:false,regphone:false}
        },
        methods:{
            add(){
                for(let i in this.regobj){
                    if(!this.regobj[i]){
                        alert("输入格式有误,添加失败")
                        return
                    }
                }
                this.arr.push({name:this.name,sex:this.sex,age:this.age,phone:this.phone})
                this.name = '';
                this.age = '';
                this.phone = '';
            },
            del(index){
                this.arr.splice(index,1)
            },
            reg(id){
                if(id == "name"){
                    let reg = /^[\u4e00-\u9fa5a-z\w]{2,16}$/
                    this.regobj.regname = reg.test(this.name)
                    return
                }else if(id == "age"){
                    let reg = /^[1-9]\d?$|^1[01]\d$|^120$/
                    this.regobj.regage = reg.test(this.age)
                    return
                }else if(id == "phone"){
                    let reg = /^[1][3-8]+\d{9}$/
                    this.regobj.regphone = reg.test(this.phone)
                    console.log(this.regobj.regphone);
                    return
                }

            }
            
        }
    })
</script>
</html>